import React from 'react'
import { Link, useLocation } from 'react-router-dom'

const TabBar: React.FC = () => {
  const location = useLocation()

  const tabs = [
    { path: '/', icon: 'fas fa-home', label: 'Home' },
    { path: '/categories', icon: 'fas fa-th-large', label: 'Categories' },
    { path: '/ai-companion/1', icon: 'fas fa-robot', label: 'AI Companion' },
    { path: '/profile', icon: 'fas fa-user', label: 'Profile' },
  ]

  return (
    <div className="fixed bottom-0 left-0 right-0 h-[83px] bg-black/80 backdrop-blur-xl border-t border-gray-800 flex justify-around items-center px-4">
      {tabs.map((tab) => (
        <Link
          key={tab.path}
          to={tab.path}
          className={`flex flex-col items-center ${
            location.pathname === tab.path ? 'text-primary' : 'text-gray-400'
          }`}
        >
          <i className={`${tab.icon} text-2xl mb-1`}></i>
          <span className="text-[10px]">{tab.label}</span>
        </Link>
      ))}
    </div>
  )
}

export default TabBar 